<template>
  <view class="search-blog-container">
    <!-- search模块 -->
    <view class="search-bar-box">
      <my-search
        :isShowInput="true"
        :config="{ backgroundColor: '#f1f0f3' }"
        :placeholderText="defaultText"
        v-model="searchVal"
        @Confirm="onSearchConfirm"
        @Blur="onSearchBlur"
        @focus="onSearchfocus"
        @Clear="onSearchClear"
        @Cancel="onSearchCancel"
      />
    </view>
    <!-- 热搜列表 -->
    <!-- HTML模板中，只可以访问 data 中定义的数据 -->
    <view class="search-hot-list-box" v-if="isShowType == HOT_LIST">
      <!-- 列表 -->
      <search-hot-list @onSearch="onSearchConfirm" />
    </view>
    <!-- 搜索历史 -->
    <view class="search-history-box" v-else-if="isShowType == SEARCH_HISTORY">
      <search-history :searchData="searchData" @onDelsearchData="onDelsearchData" @onDelAllSearchData="onDelAllSearchData" @onSearch="onSearchConfirm" />
    </view>
    <!-- 搜索结果 -->
    <view class="search-result-box" v-else>
      <!-- 1. 给mescroll-body的组件添加: ref="mescrollItem" (固定的,不可改,与mescroll-comp.js对应)-->
      <search-result-list :searchVal="searchVal" ref="mescrollItem" />
    </view>
  </view>
</template>

<script>
import { _getDefaultText } from '../../../api/search.js'
import { mapState, mapMutations } from 'vuex'
// 2. 引入mescroll-comp.js
import MescrollCompMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-comp.js'
// 0: 热搜列表 - 默认
const HOT_LIST = '0'
// 1：搜索历史
const SEARCH_HISTORY = '1'
// 2：搜索结果
const SEARCH_RESULT = '2'
export default {
  mixins: [MescrollCompMixin],
  data: () => ({
    // 输入框中的内容
    searchVal: '',
    // 输入框的 placeholder
    defaultText: '默认',
    /**
     * 默认情况下 || 点击了输入框的取消按钮时，显示【热搜列表】
     * 当 searchBar 获取焦点时 || 点击输入清空时，显示【搜索历史】
     * 用户点击热搜列表 item || 用户点击搜索历史 item || 用户按下搜索键，显示【搜索结果】
     * */
    isShowType: HOT_LIST, // 默认显示热搜列表
    HOT_LIST, // 0
    SEARCH_HISTORY, // 1
    SEARCH_RESULT, // 2
    isLoading: false
    // searchData: ['前端', '后端', '运维', 'UI'] // 搜索历史
  }),
  computed: {
    ...mapState('search', ['searchData'])
  },
  created() {
    this.getDefaultText()
    // console.log(this.$store.search.store.msg)
  },
  methods: {
    ...mapMutations('search', ['addSearchData', 'removeSearchData', 'removeAllSearchData']),
    /**
     * 搜索内容
     * */
    onSearchConfirm(val) {
      // 假如 val 不存在，那么使用【推荐的搜索文本】
      this.searchVal = val ? val : this.defaultText
      // 当用户进行输入时，如果包含输入的内容，回车显示搜索内容
      if (this.searchVal) {
        this.isShowType = SEARCH_RESULT
      }
      // 回车确定就表示该数据属于搜索的历史数据了，进行保存搜索历史数据操作
      // this.saveSearchData(val)
      this.addSearchData(this.searchVal)

      console.log('搜索内容' + this.searchVal)
    },
    /**
     * 删除指定单个历史数据
     * */
    onDelsearchData(i) {
      // this.searchData.splice(i, 1)
      this.removeSearchData(i)
    },
    /**
     * 删除全部历史数据
     * */
    onDelAllSearchData() {
      // this.searchData = []
      this.removeAllSearchData()
    },
    /**
     *searchBar获取焦点
     * */
    onSearchfocus(val) {
      this.isShowType = SEARCH_HISTORY
      console.log('获取焦点')
    },
    /**
     * searchBar失去焦点
     * */
    onSearchBlur(val) {
      console.log('失去焦点')
    },
    /**
     * searchBar 清空内容
     * */
    onSearchClear(val) {
      this.isShowType = SEARCH_HISTORY
      console.log('清空内容')
    },
    /**
     * searchBar 取消按钮
     * */
    onSearchCancel(val) {
      this.isShowType = HOT_LIST
      console.log('取消按钮')
    },
    /**
     * 获取默认搜索内容
     * */
    async getDefaultText() {
      const { defaultText } = await _getDefaultText()
      this.defaultText = defaultText
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.search-blog-container {
  .search-bar-box {
    background-color: $uni-bg-color;
    padding: $uni-spacing-row-sm;
    position: sticky;
    top: 0px;
    z-index: 9;
  }
}
</style>
